import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  /**
   * 页面的初始数据
   * 一个大数据拆分左右进行展示
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的菜单数据
    rightMenuList: [],
    // 被点击的左侧的菜单样式
    currentIndex: 0,
    // 右侧内容的滚动条距离顶部的距离
    scrollTop: 0
  },
  // 接口的返回数据
  Cates: [],
  /**
   * 生命周期函数--监听页面加载 加载就发送请求
   */
  onLoad: function () {
    /* 
     0 web中的本地存储和 小程序中的本地存储的区别
       1 写代码的方式不一样了 
         web: localStorage.setItem("key","value") localStorage.getItem("key")
     小程序中: wx.setStorageSync("key", "value"); wx.getStorageSync("key");
       2:存的时候 有没有做类型转换
         web: 不管存入的是什么类型的数据，最终都会先调用以下 toString(),把数据变成了字符串 再存入进去
       小程序: 不存在 类型转换的这个操作 存什么类似的数据进去，获取的时候就是什么类型
     1 先判断一下本地存储中有没有旧的数据
       {time:Date.now(),data:[...]}
     2 没有旧数据 直接发送新请求 
     3 有旧的数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可
      */
    //  1 获取本地存储中的数据  (小程序中也是存在本地存储 技术) 进行判断
    const Cates = wx.getStorageSync('cates')
    if (!Cates) {
      //不存在就发生请求
      this.getCates()
    } else {
      //存在的话 就先判断是否过去 当前时间戳- 定义的过期时间 毫秒 转成秒*1000 没有过期就赋值 有就重新获取数据
      if (Date.now() - Cates.times > 1000 * 100) {//10s过期测试的 
        this.getCates()
      } else {
        // 可以使用旧的数据
        this.Cates = Cates.data;
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightMenuList = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightMenuList
        })
      }
    }
  },
  //获取分类数据
  async getCates() {
    /*
     request({
       url: '/categories'
     }).then(res => {
       // console.log(res);
       this.Cates = res.data.message;
       // 设置数据存储到本地存储中 data数据 有时间戳 和 当前数据
       wx.setStorageSync('cates', { times: Date.now(), data: this.Cates })
       // 构造左侧的大菜单数据 要大数组的第一个name值 map方法 回调 函数每一个元素都会去调用 之后返回新数组 返回调用这个回调函数的数据 
       let leftMenuList = this.Cates.map(v => v.cat_name) //取取数组的name属性值 返回新的数组
       // 构造右侧的商品数据 第一个值下面的chirlen 展示的数据第一个就是大家电开始的 点击切换 index 在调用获取对应的第几个的chirlen
       let rightMenuList = this.Cates[0].children
       //设置值
       this.setData({
         leftMenuList,
         rightMenuList
       })
     })
     */
    // 1 使用es7的async await来发送请求
    const res = await request({ url: "/categories" });
    // this.Cates = res.data.message;
    this.Cates = res;
    // 把接口的数据存入到本地存储中
    wx.setStorageSync("cates", { times: Date.now(), data: this.Cates });
    // 构造左侧的大菜单数据
    let leftMenuList = this.Cates.map(v => v.cat_name);
    // 构造右侧的商品数据
    let rightMenuList = this.Cates[0].children;
    this.setData({
      leftMenuList,
      rightMenuList
    })
  },
  //左侧菜单的点击事件
  handleItemTap(e) {
    const { index } = e.currentTarget.dataset;
    let rightMenuList = this.Cates[index].children
    this.setData({
      currentIndex: index,
      rightMenuList,
      // 重新设置 右侧内容的scroll-view标签的距离顶部的距离
      scrollTop: 0
    })
  }
})